<template>
  <div>
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">产品详情</x-header>
    <div class="productDetailA">
      <h3>{{financingData.name}}</h3>
      <div class="product11">{{financingData.productType}}</div>
      <div class="product11">{{financingData.cpCurrency}}</div>
      <div class="chart1">
        <div class="item">
          <strong>{{financingData.newLimit}}</strong>
          <span>最新产品净值</span>
        </div>
        <div class="item">
          <strong class="secondS">{{financingData.startCurrency}}</strong>
          <span>起购金额</span>
        </div>
      </div>
    </div>
    <div class="productDetailB">
      <div class="jzzs">
        <p>净值走势</p>
      </div>
      <div class="productchart">

      </div>
    </div>

    <div class="detailInfoC">
      <div class="cpjs">
        <h2>产品介绍</h2>
      </div>
      <div class="detailMain1">
        <div class="productList">
          <div class="dm">产品代码</div>
          <div class="dmt">{{financingData.productMa}}</div>
        </div>
        <div class="productList">
          <div class="dm">手续费率</div>
          <div class="dmt">
            <div class="productxq">
              <group style="width:1.7rem;float:right;">
                <cell :title="aftera" @click.native="showModule" is-link>
                </cell>
              </group>
            </div>
          </div>
        </div>
        <div class="productList">
          <div class="dm">折扣率</div>
          <div class="dmt">{{financingData.despositRate}}</div>
        </div>
        <div class="productList">
          <div class="dm">是否保本</div>
          <div class="dmt">{{financingData.CapitalprdBen}}</div>
        </div>
        <div class="productList">
          <div class="dm">风险等级</div>
          <div class="dmt">{{financingData.RiskLevel}}</div>
        </div>
        <div class="productList">
          <div class="dm">分红方式</div>
          <div class="dmt">{{financingData.shareRed}}</div>
        </div>
      </div>
    </div>
    <x-button class="subBtn"  @click.native="getData" type="primary" action-type="button">{{buttonTxt}}</x-button>
  </div>
</template>

<script>
import { AlertModule } from 'vux'
export default {
  data () {
    return {
      financingData: {
        name: '东亚联丰环球债券',
        productType: '产品类型',
        cpCurrency: '人民币',
        newLimit: '16.87000',
        startCurrency: '5万元',
        productMa: 'FA2R',
        despositRate: '1.0',
        CapitalprdBen: '否',
        RiskLevel: '1级',
        shareRed: '分派'
      },
      aftera: '详情',
      showModule () {
        AlertModule.show({
          title: '申购手续费率',
          content: '<dl><dt>申购金额</dt><d>申购费率</dl>',
          button: '确认',
          onShow () {
            console.log('Module: I\'m showing')
          },
          onHide () {
            console.log('Module: I\'m hiding now')
          }
        })
      },
      buttonTxt: '去开户' // 判断获得： 1.购买；2.去开户
    }
  },
  methods: {
    getData () {
      let lvm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'H5overseasFinancinghhx'}
        }),
        function (response) {
          alert('返回' + JSON.stringify(response))
          // this.financingData = response.data[0]
          // response是响应数据
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            lvm.financingData = response.data.data[0]
          } else {
            console.log('fail')
          }
        }
      )
    }

  },
  created () {
    this.getData()
  }
}
</script>

<style scoped>
.a, .b{
  width:100px;
  text-align: center;
  background: #fff;
}
</style>
<style lang="less" scoped>
.productDetailB {
  width:100%;
  height:3.8rem;
  background:#fff;
  margin-top:0.2rem;
  .jzzs {
    width:100%;
    height:.8rem;
    font-size:0.3rem;
    font-family:PingFang-SC-Bold;
    color:rgba(51,51,51,1);
    line-height:.8rem;
    border-bottom:1px solid #EAEAEA;
    p {
      margin-left:.3rem;
      color:#333;
    }
  }
}
.productDetailA {
  width: 100%;
  height: 3rem;
  background-color: #3d477b;
  color: #fff;
  h3 {
    padding: .4rem 0 0 .26rem;
    font-size: .26rem;
  }
  .product11{
    border-radius: 2px;
    border:1px solid #FF6633;
    width:1rem;
    height:0.3rem;
    color:#FF6633;
    margin-left: .3rem;
    text-align: center;
    line-height: 0.3rem;
    font-size: .2rem;
    float: left;
  }
  .chart1 {
    margin-top: .6rem;
    display: flex;
    .item {
      flex: 1;
      padding: .3rem 0 0 .3rem;
      strong {
        // todo 此处需要用到 PingFang-SC-Bold 字体
        display: block;
        font-weight: normal;
        font-size: .6rem;
      }
      .secondS {
        color:#FF6633;
      }
      span {
        display: block;
        font-size: .2rem;
      }
    }
  }
}

.detailInfoC {
  padding: .0rem .3rem;
  background-color: #fff;
  .cpjs{
    width:100%;
    height:.8rem;
    font-family:PingFang-SC-Bold;
    color:rgba(51,51,51,1);
    line-height:.8rem;
    border-bottom:1px solid #EAEAEA;
    h2 {
    font-size:0.3rem;
    font-weight: bold;
    }
  }
  .detailMain1 {
    padding: .16rem 0;
    height:3.78rem;
    .productList {
      line-height: .56rem;
      height:.56rem;
      overflow: hidden;
      .dm {
        width: 1.3rem;
        color: #999;
        font-size:.28rem;
        float: left;
      }
      .dmt {
        text-align: right;
        font-size:.28rem;
        float:right;
        .productxq {
          color:#3333FF;
          margin-right:0.2rem;
          float: left;
          height:.56rem;
          position: relative;
        }
        .productjt{
          font-size:.28rem;
          float:right;
        }
      }
    }
  }
}
</style>
